import { CompBar,FormConfig,FormItemConfig } from './base.js'
import { AllComps,ConfigurableAttrFieldComps } from './comps.js'



/**************************************************
*
*        表单attr设置
*
 **************************************************/


const formAttrConfig = new FormConfig({
  cols: 1,
  formItems: [
    ConfigurableAttrFieldComps.get('title',{ helpText: '表单标题' }),
    new FormItemConfig({
      label: '表单宽度',key: 'width',compName: 'el-input',attrs: { type: 'text' },
      helpText: '定义整个表单宽度，格式为 像素或百分比',required: true
    }),

    AllComps.get('radioGroup',{
      configurable: false,key: 'cols',label: 'cols',
      attrs: { isButton: true,list: [1,2,3,4,5].map((item) => ({ name: item,code: item })) }
    }),

    new FormItemConfig({
      label: '行间距',key: 'rowGap',compName: 'el-input',attrs: { type: 'text',placeholder: '单位px' },
      helpText: 'grid布局中rowGap,表单的行间距,百分比或者像素'
    }),
    new FormItemConfig({
      helpText: 'grid布局中columnGap,表单的列间距,百分比或者像素',
      label: '列间距',key: 'columnGap',compName: 'el-input',attrs: { type: 'text',placeholder: '单位px' }
    }),

    ConfigurableAttrFieldComps.get('readonly',{ helpText: '整个表单是否只读' }),
    AllComps.get('radioGroup',{
      configurable: false,key: 'labelPosition',label: '标签位置',
      attrs: { isButton: true,list: ['left','top'].map((item) => ({ name: item,code: item })) }
    }),
    new FormItemConfig({
      label: '标签宽度',key: 'labelWidth',compName: 'el-input',attrs: { placeholder: '百分比或px' }
    }),new FormItemConfig({
      label: '标签后缀',key: 'labelSuffix',compName: 'el-input'
    }),
    ConfigurableAttrFieldComps.get('size',{ key: 'size' })

  ]

})



/**************************************************
*
*        组件attr设置
*
 **************************************************/
const compAttrConfig = new FormConfig({
  emptyText: '请选择一个组件',
  formData: {},
  labelPosition: 'left',
  // rules: {
  //   label: [{ required: true,message: 'xxx',trigger: 'change' }],
  //   dataKey: [{ min: 5,message: 'xxx',trigger: 'change' }],
  // },
  formItems: [],   //点击每个组件时，由每个组件的 configurableFieldItems 提供

})

/**************************************************
*
*        组件bar配置
*
 **************************************************/
const compBarConfig = new CompBar({
  columnGap: '20px',
  rowGap: '20px',
  cols: 2,
  parts: [
    new FormConfig({
      title: '基础组件',
      draggable: true,
      formItems: [
        AllComps.get('emptyBlock'),
        AllComps.get('input'),
        AllComps.get('select',{ title: '下拉单选',label: '下拉单选' }),
        AllComps.get('select',{ title: '下拉多选',label: '下拉多选',attrs: { multiple: true } }),
        AllComps.get('radioGroup'),
        AllComps.get('switch')

      ]
    }),
    new FormConfig({
      title: '本地模板 (localStorage)',
      draggable: true,
      formItems: [
        AllComps.get('iframe')
      ]

    })
    ,
    new FormConfig({
      title: '自定义组件',
      draggable: true,
      formItems: [
        AllComps.get('blankTemplate')
      ]
    })
  ]

})


/**************************************************
*
*        模板表单的配置
*
 **************************************************/
/**@type {FormConfig} */
const formTemplateConfig = new FormConfig({
  title: '表单标题',
  cols: 3,
  rowGap: '10px',
  columnGap: '10px',
  sortable: true,
  draggable: true,
  selectable: true
})
// const formTemplateConfigCols = Vue.computed(() =>fo)

/**
 * 初始化 formAttrConfig
 * 表单设置的对象 为 formTemplateConfig
 *  */
formAttrConfig.formData = formTemplateConfig
export { compAttrConfig,compBarConfig,formAttrConfig,FormConfig,FormItemConfig,formTemplateConfig }


